<template>
  <div class="component-w">
    <ul class="component-type">
      <li
        @click="selectedHandle(index)"
        :class="typeId === index ? 'action' : ''"
        v-for="(item, index) in componentTypes"
        :key="index"
      >
        <img src="" alt="" />
        <div>{{ item.name }}</div>
      </li>
    </ul>
    <ul class="component-item">
      <li
        @click="addComponent(item)"
        v-for="(item, index) in components"
        :key="index"
      >
        <img :src="item.other.icon" alt="" />
        <div>{{ item.other.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { DataType, IConfig, ReuqestMethod } from "@/stores/datav/types";
import { useConfig } from "@/stores/datav/useConfig";
import shortid from "shortid";
const config = useConfig();
const componentTypes = reactive([
  {
    name: "折线图",
    icon: "",
    children: [
      {
        render: "v-chart",
        data: {
          name: "1",
        },
        option: {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "line",
            },
          ],
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "折线图",
        },
      },
    ],
  },
  {
    name: "地图",
    icon: "",
    children: [
      {
        render: "v-map-chart",
        data: {
          climecode: "shanxi1",
        },
        option: {
          climecode: "data.climecode",
          option: {
            tooltip: {
              show: true,
              trigger: "item",
            },
            geo: {
              show: true,
              map: "data.climecode",
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: "#097593",
                    fontWeight: "bolder",
                  },
                },
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#2380f1",
                  borderColor: "#016cde",
                  borderWidth: 2,
                  shadowColor: "rgba(63, 218, 255, 0.5)",
                  shadowBlur: 30,
                },
                emphasis: {
                  areaColor: "#31d2ff",
                },
              },
            },
            series: [
              {
                type: "map",
                mapType: "data.climecode",
                map: "data.climecode",
                geoIndex: 0,
                aspectScale: 0.75,
                showLegendSymbol: false,
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                  },
                },
                animation: false,
              },
            ],
          },
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "echarts地图",
        },
      }
    ],
  },
  {
    name: "自定义",
    icon: "",
    children: [
      {
        render: "v-text",
        data: {},
        option: {
          fontSize: 34,
          color: "#fff",
          isLink: false,
          link: "",
          speed: 5,
          lamp: false,
          click: false,
          context: "文本框",
          spacing: 1,
          align: "left",
          reverse: true,
          weight: "normal",
          backgroundColor: "rgba(0,0,0,0)",
          dateflag: false,
          dateformat: "E",
          style: "",
          class: "",
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "文字",
        },
      },
      {
        render: "v-html",
        data: {},
        option: {
          _html: "自定义html",
          _css: "",
          component: "",
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "html",
        },
      },
      {
        render: "v-image",
        data: {},
        option: {
          rotate: true,
          opacity: 1,
          speed: 20,
          imgurl: "",
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "图片",
        },
      },
      {
        render: "v-count",
        data: {},
        option: {
          pbgColor: "rgba(255, 255, 255, 0)",
          pbgImg: "http://192.168.100.12:10005/uploads/2019/20191211165254.png",
          pWidth: "50",
          pMargin: "4",
          symbolbgColor: "rgba(0, 81, 255, 0)",
          symbolbgImg: "",
          symbolWidth: "21",
          fontColor: "#17D7F3",
          fontSize: "60",
          dStyle: "",
          companypos: "bottom",
          cfontSize: "20",
          cfontColor: "#17D7F3",
          iscompany: false,
          ccontent: "元",
          data: "123456",
          options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ",", "."],
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "翻牌器",
        },
      },
      {
        render: "v-tabs",
        data: {},
        option: {
          width: "100%",
          height: "100%",
          spacing: 8,
          fontSize: 20,
          fontColor: "#eeeeee",
          bgColor: "#0b2241",
          bgImg: "/uploads/2019/20191202085510.png",
          border: {
            width: 0,
            color: "rgba(245, 0, 0, 0)",
          },
          action: {
            fontColor: "#4dffff",
            bgImg: "/uploads/2019/20191202085510.png",
            bgColor: "#0d618d",
            borderColor: "rgba(255, 255, 255, 0)",
          },
          active: [],
          tab: [
            {
              name: "选项卡1",
              id: 1,
            },
            {
              name: "选项卡2",
              id: 2,
            },
          ],
          defaultId: 1,
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "选项卡",
        },
      },
      {
        render: "v-table",
        data: {
          data: [
            {
              department: "研发1",
              chulajsh: "案件",
            },
            {
              department: "研发2",
              chulajsh: "案件",
            },
            {
              department: "研发3",
              chulajsh: "案件",
            },
            {
              department: "研发4",
              chulajsh: "案件",
            },
            {
              department: "研发5",
              chulajsh: "案件",
            },
            {
              department: "研发6",
              chulajsh: "案件",
            },
            {
              department: "研发7",
              chulajsh: "案件",
            },
          ],
        },
        option: {
          list: "data.data",
          titles: [
            {
              title: "排名",
              key: "index",
              width: "25%",
              align: "center",
            },
            {
              title: "部门",
              key: "danM",
              width: "25%",
              align: "center",
            },
            {
              title: "姓名",
              key: "xingM",
              width: "25%",
              align: "center",
            },
            {
              title: "处理案件",
              key: "gangW",
              width: "25%",
              align: "center",
            },
          ],
          titleHeight: "40px",
          titlebg: "#007AFF",
          rowHeight: "40px",
          rowbg: "#5cb1fa",
          swiperConfig: {
            direction: "vertical",
            slidesPerView: "auto",
            spaceBetween: 0,
            autoplay: {
              delay: 1000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            loop: true,
          },
        },
        other: {
          group: "",
          icon: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2944858655,3260611328&fm=58",
          name: "表格",
        },
      },
    ],
  },
]);
const typeId = ref<number>(0);
const selectedHandle = (index: number) => {
  if (typeId.value === index) {
    return;
  }
  typeId.value = index;
};
const components = computed(() => {
  return componentTypes[typeId.value].children;
});

const addComponent = (item: IConfig) => {
  const currentConfig = JSON.parse(JSON.stringify(item));

  currentConfig.location = {
    height: 200,
    width: 200,
    x: document.querySelector(".editor-canvas-inner").scrollLeft + 200,
    y: document.querySelector(".editor-canvas-inner").scrollTop + 80,
  };
  currentConfig.request = {
    dataType: DataType.STATIC,
    url: "",
    method: ReuqestMethod.GET,
    params: {},
    data: {},
    responseKey: "",
  };
  currentConfig.service = {
    after: "",
    service: "",
  };
  config.config["box" + shortid.generate().toLowerCase()] = currentConfig;
};
</script>

<style lang="less" scoped>
.component-w {
  width: 100%;
  height: 100%;
  display: flex;
  .component-type {
    width: 100px;
    height: 100%;
    overflow-y: auto;
    & > li {
      width: 100px;
      height: 100px;
      color: @white;
      cursor: pointer;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        margin-bottom: 2px;
      }
      div {
        width: 100%;
        text-align: center;
      }
    }
    & > li:hover {
      background-color: fade(@primary-color, 50%);
    }
    & > li.action {
      background-color: fade(@primary-color, 50%);
    }
  }
  .component-item {
    width: calc(100% - 80px);
    height: 100%;
    overflow-y: auto;
    //display: flex;
    //flex-wrap: wrap;
    & > li {
      width: 100px;
      height: 100px;
      color: @white;
      cursor: pointer;
      float:left;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        margin-bottom: 2px;
      }
      div {
        width: 100%;
        text-align: center;
      }
    }
    & > li:hover {
      background-color: fade(@primary-color, 50%);
    }
    & > li.action {
      background-color: fade(@primary-color, 50%);
    }
  }
}
</style>
